<template>
  <div class="flightPaymodify">
    <!-- 支付方式修改 -->
    <div class="flightPaymodify_top">
      <el-form :model="paywayList" :rules="rules" ref="paywayList" size="mini" class="demo-ruleForm">
        <div style="display:flex">
          <el-form-item label="支付总金额" style="display:flex;margin:0 20px 0 0">
            <el-input :disabled="true" style="width:80px" v-model="paywayList.amount"></el-input>
          </el-form-item>
          <el-form-item label="预留款" style="display:flex;margin:0 20px 0 0">
            <el-input :disabled="true" style="width:80px" v-model="paywayList.reserveMoney"></el-input>
          </el-form-item>
          <el-form-item label="使用预留款金额" style="display:flex;margin:0 20px 0 0" prop="applyMoney">
            <el-input style="width:80px" @input="inputaside" v-model="paywayList.applyMoney"></el-input>
          </el-form-item>
          <el-form-item label="剩余预留款金额" style="display:flex">
            <el-input :disabled="true" style="width:80px" v-model="paywayList.asidemoney"></el-input>
          </el-form-item>
        </div>
        <div style="display:flex">
          <el-form-item label="应支付金额" style="display:flex;margin:0 20px 0 0">
            <el-input :disabled="true" style="width:80px" v-model="paywayList.shouldbemoney"></el-input>
          </el-form-item>
        </div>
        <!-- <div style="display:flex;">
          <el-form-item label="描述"  style="display:flex;margin:0 20px 0 0">
          </el-form-item>
        </div> -->
        <div style="display:flex;margin:20px 0 0 0">
          <el-form-item label="支付方式" style="display:flex;margin:0 20px 0 0" prop="paytype">
            <el-select clearable @change="cityChange" v-model="paywayList.paytype" style="width: 150px"
              placeholder="请选择支付类型" size="mini">
              <el-option v-for="(item,index) in certificate" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <!-- 储蓄卡 -->
        <div style="margin:20px 0 0 0" v-if="this.type=='debitcard'">
          <div style="display: flex; margin: 0 0 0 0">
            <el-form-item label="银行卡号" style="display:flex;margin:0 20px 0 0" prop="cardNumber">
              <el-input size="mini" v-model="paywayList.cardNumber" style="width: 240px"></el-input>
            </el-form-item>
            <el-form-item label="持卡人" style="display:flex;margin:0 20px 0 0" prop="cardholder">
              <el-input size="mini" v-model="paywayList.cardholder" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="手机号" style="display:flex;margin:0 20px 0 0" prop="contractPhoneOne">
              <el-input size="mini" v-model="paywayList.contractPhoneOne" style="width: 150px"></el-input>
            </el-form-item>
          </div>
          <div style="display: flex; margin: 20px 0 0 0">
            <el-form-item label="证件号" style="display:flex;margin:0 20px 0 0" prop="custCertificateNo">
              <el-input size="mini" v-model="paywayList.custCertificateNo" style="width: 240px"></el-input>
            </el-form-item>
          </div>
        </div>
        <!-- 信用卡 -->
        <div style="margin:20px 0 0 0" v-if="this.type=='creditcard'">
          <div style="display: flex; margin: 0 0 0 0">
            <el-form-item label="银行卡号" style="display:flex;margin:0 20px 0 0" prop="cardNumber">
              <el-input size="mini" v-model="paywayList.cardNumber" style="width: 240px"></el-input>
            </el-form-item>
            <el-form-item label="持卡人" style="display:flex;margin:0 20px 0 0" prop="cardholder">
              <el-input size="mini" v-model="paywayList.cardholder" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="手机号" style="display:flex;margin:0 20px 0 0" prop="contractPhoneOne">
              <el-input size="mini" v-model="paywayList.contractPhoneOne" style="width: 150px"></el-input>
            </el-form-item>
          </div>
          <div style="display: flex; margin: 20px 0 0 0">
            <el-form-item label="证件号" style="display:flex;margin:0 20px 0 0" prop="custCertificateNo">
              <el-input size="mini" v-model="paywayList.custCertificateNo" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="CVV2" style="display:flex;margin:0 20px 0 0" prop="Cvv2">
              <el-input v-model="paywayList.Cvv2" size="mini" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="卡有效期" style="display:flex;margin:0 20px 0 0" prop="creditCardTime">
              <el-date-picker v-model="paywayList.creditCardTime" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </div>
        </div>
        <!-- 语音 -->
        <!-- <div style="margin:20px 0 0 0" v-if="this.type=='voice'">
             <div style="display: flex; margin: 0 0 0 0">
              <el-form-item label="银行卡号"  style="display:flex;margin:0 20px 0 0" prop="cardNumber">
                 <el-input size="mini" v-model="paywayList.cardNumber" style="width: 240px" ></el-input>
              </el-form-item>
              <el-form-item label="持卡人"  style="display:flex;margin:0 20px 0 0" prop="cardholder">
                 <el-input  size="mini" v-model="paywayList.cardholder" style="width: 150px" ></el-input>
              </el-form-item>
               <el-form-item label="手机号"  style="display:flex;margin:0 20px 0 0" prop="contractPhoneOne">
                 <el-input size="mini" v-model="paywayList.contractPhoneOne" style="width: 150px" ></el-input>
              </el-form-item>
            </div>
            <div style="display: flex; margin: 20px 0 0 0" >
               <el-form-item label="证件号"   style="display:flex;margin:0 20px 0 0" prop="custCertificateNo">
                 <el-input size="mini" v-model="paywayList.custCertificateNo" style="width: 240px"></el-input>
              </el-form-item>
               </div>
          </div> -->
        <el-form-item label="备注" style="display:flex;margin:20px 0 0 0">
          <el-input type="textarea" v-model="paywayList.remark" style="width:400px" :rows="2" placeholder="请输入内容">
          </el-input>
        </el-form-item>
        <el-form-item style="margin:20px 0 10px 40%">
          <el-button type="primary" @click="submitForm('paywayList')">保存</el-button>
          <el-button type="primary" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>

    </div>

  </div>
</template>

<script>
  export default {
    name: 'flightPaymodify',
    data() {
      return {
        // 订单编号
        orderId: "",
        valueList: "",
        // 支付类型
        certificate: [
          // {
          //   value: "voice",
          //   label: "语音",
          // },
          // {
          //   value: "unionPayQR",
          //   label: "银联二维码",
          // },
          {
            value: "creditcard",
            label: "信用卡",
          },
          {
            value: "debitcard",
            label: "储蓄卡",
          },
        ],
        // 修改支付方式校验
        rules: {
          applyMoney: [{
            required: true,
            message: '请输入使用预留款，不使用请输入0',
            trigger: 'blur'
          }, ],
          paytype: [{
            required: true,
            message: '请选择支付方式',
            trigger: 'change'
          }, ],
          cardNumber: [{
            required: true,
            message: '请输入银行卡号',
            trigger: 'blur'
          }, ],
          cardholder: [{
            required: true,
            message: '请输入持卡人姓名',
            trigger: 'blur'
          }, ],
          contractPhoneOne: [{
            required: true,
            message: '请输入银行预留手机号',
            trigger: 'blur'
          }, ],
          custCertificateNo: [{
            required: true,
            message: '请输入证件号',
            trigger: 'blur'
          }, ],
          Cvv2: [{
            required: true,
            message: '请输入Cvv2',
            trigger: 'blur'
          }, ],
          creditCardTime: [{
            required: true,
            message: '请选择证件有效期',
            trigger: 'blur'
          }, ],
        },
        // 修改支付方式
        paywayList: {
          // 备注
          remark: "",
          // cvv2
          Cvv2: "",
          // 信用卡到期时间
          creditCardTime: "",
          // 姓名
          cardholder: "",
          // 银行卡号
          cardNumber: "",
          // 手机号
          contractPhoneOne: "",
          // 证件号
          custCertificateNo: "",
          // 预留款总额
          reserveMoney: 0,
          // 剩余预留款金额
          asidemoney: '',
          // 使用预留款
          applyMoney: "",
          // 应支付
          shouldbemoney: "",
          // 支付方式
          paytype: "",
        },
        type: "",
        // 支付方式
      }
    },
    methods: {
      // 保存订单
      getsavePay() {
        localStorage.setItem("isToken", true);
        this.$axios.getsavePay({
          // 订单号
          orderNum: this.paywayList.orderNum,
          // 支付方式
          payType: this.type,
          // 应支付金额
          actualAmount: String(this.paywayList.shouldbemoney),
          // 使用预留款
          useReservedMoney: this.paywayList.applyMoney,
          // 证件号
          custCertificateNo: this.paywayList.custCertificateNo,
          // 手机号
          contractPhoneOne: this.paywayList.contractPhoneOne,
          // 银行卡号
          cardNumber: this.paywayList.cardNumber,
          // 姓名
          cardholder: this.paywayList.cardholder,
          // 信用卡到期时间
          creditCardTime: this.paywayList.creditCardTime,
          // cvv2
          Cvv2: this.paywayList.Cvv2,
          // 备注
          remark: this.paywayList.remark,
          // 支付渠道
          payWay: "Crm"
        }).then((res) => {
          console.log(res)
          if (res.code == '200') {
            this.$message({
              message: '保存成功',
              type: 'success'
            });
            this.$router.go(-1)
          } else {
            this.$message({
              message: '保存失败，请核对信息重新保存',
              type: 'warning'
            });
          }
        })
      },
      // 详情
      getupdatePayTypeVo() {
        this.$axios.getupdatePayTypeVo({
          orderNum: this.orderId
        }).then((res) => {
          console.log(res)
          if (res.code == "200") {
            this.paywayList = res.data
            console.log(this.paywayList)
          }
        })
      },
      // 获取预留款的事件
      inputaside(row) {
        console.log(row)
        this.paywayList.asidemoney = (this.paywayList.reserveMoney) - row
        if (this.paywayList.reserveMoney < row) {
          this.$message({
            message: '使用金额不得大于预留款现有金额',
            type: 'warning'
          });
        }
        console.log(this.paywayList.asidemoney)
        //  应支付金额
        this.paywayList.shouldbemoney = (this.paywayList.amount) - row
      },
      // 取消按钮
      cancel() {
        this.$router.go(-1);
      },
      // 支付类型
      cityChange(index) {
        this.type = index;
        console.log(this.type)
      },
      // 修改支付方式保存按钮
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.getsavePay()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //跳出
      closeLoading() {
        this.tableLoading.close();
      },
      //进入
      showLoading() {
        this.tableLoading = this.$loading({
          text: "拼命加载数据中", //显示在加载图标下方的加载文案
          spinner: "el-icon-loading", //自定义加载图标类名
          background: "rgba(0, 0, 0, 0.4)", //遮罩层颜色
          target: document.querySelector("#table"), //loadin覆盖的dom元素节点
        });
      },
    },
    mounted() {
      this.orderId = this.$route.params.orderId
      console.log(this.orderId)
      // 详情
      this.getupdatePayTypeVo()
    },
  }
</script>

<style scoped>
  .flightPaymodify {
    margin-top: 50px;
  }

  .flightPaymodify_top {
    display: flex;
    justify-content: center;
  }
</style>